<!--
# Copyright (c) 2024 Bird Software Solutions Ltd
# This program and the accompanying materials
# are made available under the terms of the Eclipse Public License 2.0
# which accompanies this distribution, and is available at
# https://www.eclipse.org/legal/epl-2.0/
#
# SPDX-License-Identifier: EPL-2.0
#
# Contributors:
#    Neil Mackenzie - initial API and implementation
-->
{% extends 'base.html' %}

{% block content %}
<h1>Edit Mapping Definitions</h1>
<a href="{% url 'pybirdai:workflow_task' task_number=1 operation='review' %}">Back to Review</a>

<div class="action-buttons">
    <button type="button" class="create-button" onclick="showNewMappingForm()">Create New Mapping Definition</button>
</div>

<!-- New Mapping Form (Hidden by default) -->
<div id="newMappingForm" style="display: none;" class="form-container">
    <h2>Create New Mapping Definition</h2>
    <form method="post" action="{% url 'pybirdai:create_mapping_definition' %}">
        {% csrf_token %}
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
        </div>
        <div class="form-group">
            <label for="code">Code:</label>
            <input type="text" id="code" name="code" required>
        </div>
        <div class="form-group">
            <label for="maintenance_agency_id">Maintenance Agency:</label>
            <select id="maintenance_agency_id" name="maintenance_agency_id">
                <option value="">Select Agency</option>
                {% for agency in maintenance_agencies %}
                <option value="{{ agency.maintenance_agency_id }}">{{ agency.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="form-group">
            <label for="mapping_id">Mapping ID:</label>
            <input type="text" id="mapping_id" name="mapping_id" required>
        </div>
        <div class="form-group">
            <label for="mapping_type">Mapping Type:</label>
            <input type="text" id="mapping_type" name="mapping_type" required>
        </div>
        <div class="form-group">
            <label for="member_mapping_id">Member Mapping:</label>
            <select id="member_mapping_id" name="member_mapping_id">
                <option value="">Select Member Mapping</option>
                {% for mapping in member_mappings %}
                <option value="{{ mapping.member_mapping_id }}">{{ mapping.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="form-group">
            <label for="variable_mapping_id">Variable Mapping:</label>
            <select id="variable_mapping_id" name="variable_mapping_id">
                <option value="">Select Variable Mapping</option>
                {% for mapping in variable_mappings %}
                <option value="{{ mapping.variable_mapping_id }}">{{ mapping.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="form-buttons">
            <button type="submit">Create</button>
            <button type="button" onclick="hideNewMappingForm()">Cancel</button>
        </div>
    </form>
</div>

{% if messages %}
<ul class="messages">
    {% for message in messages %}
    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
    {% endfor %}
</ul>
{% endif %}

<form method="post">
    {% csrf_token %}
    {{ formset.management_form }}
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Code</th>
                    <th>Maintenance Agency</th>
                    <th>Mapping ID</th>
                    <th>Mapping Type</th>
                    <th>Member Mapping</th>
                    <th>Variable Mapping</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                {% for form in formset %}
                {{ form.id }}
                <tr>
                    <td>{{ form.name }}</td>
                    <td>{{ form.code }}</td>
                    <td>{{ form.maintenance_agency_id }}</td>
                    <td>{{ form.mapping_id }}</td>
                    <td>{{ form.mapping_type }}</td>
                    <td>{{ form.member_mapping_id }}</td>
                    <td>{{ form.variable_mapping_id }}</td>
                    <td>
                        <button type="button" onclick="confirmDelete('{{ form.instance.mapping_id }}')">Delete</button>
                    </td>
                </tr>
                {% if form.errors %}
                <tr>
                    <td colspan="8">
                        {{ form.errors }}
                    </td>
                </tr>
                {% endif %}
                {% endfor %}
            </tbody>
        </table>
    </div>
    <button type="submit">Save Changes</button>
</form>

<!-- Pagination -->
<div class="pagination">
    <span class="step-links">
        {% if page_obj.has_previous %}
            <a href="?page=1">&laquo; first</a>
            <a href="?page={{ page_obj.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
        </span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">next</a>
            <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
        {% endif %}
    </span>
</div>

<script>
function confirmDelete(mappingId) {
    if (confirm('Are you sure you want to delete this mapping definition?')) {
        var form = document.createElement('form');
        form.method = 'POST';
        form.action = "{% url 'pybirdai:delete_mapping_definition' 0 %}".replace('0', mappingId);
        var csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = 'csrfmiddlewaretoken';
        csrfInput.value = '{{ csrf_token }}';
        form.appendChild(csrfInput);
        document.body.appendChild(form);
        form.submit();
    }
}

function showNewMappingForm() {
    document.getElementById('newMappingForm').style.display = 'block';
}

function hideNewMappingForm() {
    document.getElementById('newMappingForm').style.display = 'none';
}
</script>

<style>
    .table-container {
        width: 100%;
        overflow-x: auto;
        margin-bottom: 1em;
    }
    table {
        border-collapse: collapse;
        width: 100%;
        min-width: 1200px;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
        position: sticky;
        top: 0;
    }
    .pagination {
        margin-top: 20px;
    }
    .action-buttons {
        margin: 20px 0;
    }
    .create-button {
        display: inline-block;
        padding: 10px 20px;
        background-color: #4CAF50;
        color: white;
        text-decoration: none;
        border-radius: 4px;
        margin-bottom: 10px;
        border: none;
        cursor: pointer;
    }
    .create-button:hover {
        background-color: #45a049;
    }
    .form-container {
        max-width: 600px;
        margin: 20px 0;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #f9f9f9;
    }
    .form-group {
        margin-bottom: 15px;
    }
    .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }
    .form-group input,
    .form-group select {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    .form-buttons {
        margin-top: 20px;
    }
    .form-buttons button {
        margin-right: 10px;
        padding: 8px 15px;
        border-radius: 4px;
        border: none;
        cursor: pointer;
    }
    .form-buttons button[type="submit"] {
        background-color: #4CAF50;
        color: white;
    }
    .form-buttons button[type="button"] {
        background-color: #f44336;
        color: white;
    }
</style>
{% endblock %}
